<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./swiper-bundle.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 80%;
            height:50%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            transform: scale(0.8);
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
        }
        img{
           width: 100%;
           height: 100%;
        }
       
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper swiper-container-initialized swiper-container-horizontal">

        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-2884px, 0px, 0px);" id="boxfou">
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7"
                style="width: 450.667px; margin-right: 30px;"></div>
           <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="9"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide" data-swiper-slide-index="0" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="1" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="2" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="3"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="4"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="5"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide" data-swiper-slide-index="6" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="7" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="8" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="9" style="width: 450.667px; margin-right: 30px;">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1"
                style="width: 450.667px; margin-right: 30px;"></div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2"
                style="width: 450.667px; margin-right: 30px;"></div>
                
                
        </div>
        </div>
        <div class="bocname">
            <h1></h1>
        </div>
        <!-- Add Pagination -->

        


        <!-- Swiper JS -->
        <script src="./swiper-bundle.js"></script>

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper', {
                slidesPerView: 5,
                spaceBetween: 10,
                centeredSlides: true,
                loop: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });

           
   
     $(function(){
        var Arr = localStorage.getItem('Arr') ? JSON.parse(localStorage.getItem('Arr')) : []
         console.log(Arr);
                $.ajax({
                type: 'get',
                url: `https://liu.zzgoodqc.cn/movie/list?page=${Arr.Jump}`,
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                 var add = ''
                    for(let i in res.coming){
                add +=`
                <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="${Arr.Jump}"
                style="width: 300px; margin-right: 30px;" ><img src="${res.coming[i].img}" alt=""></div>
               
                    `
            } 
            $('#boxfou').html(add)
            
                },
            })
            })
    
           
    
        </script>


</body>

</html>